import { PureComponent } from "react";
import { StoreContext } from "./StoreContext";

/**
 * connect
 * @param {mapStateToProps} mapStateToProps 函数
 * @param {mapDispatchToProps} mapDispatchToProps 函数
 * @returns 函数 => 高阶组件
 */
export function connect(mapStateToProps, mapDispatchToProps) {

  //高阶组件：函数
  return (WrapperComponent) => {
    class NewComponent extends PureComponent {

      constructor(props, context) {
        super(props);
        this.state = mapStateToProps(context.getState())
      }

      componentDidMount() {
        //需要监听store中数据的改变，执行render函数，重新渲染页面
        this.context.subscribe(() => {
          //不论store中的哪个数据发送改变，一律强制渲染页面
          //this.forceUpdate()

          //借助setState(), 根据当前页面绑定的数据动态决定是否重新渲染
          this.setState(mapStateToProps(this.context.getState()))
        })
      }

      componentWillUnmount() {
        this.context.unsubscript();
      }

      render() {
        const stateObj = mapStateToProps(this.context.getState())
        const dispatchObj = mapDispatchToProps(this.context.dispatch)
        return <WrapperComponent {...this.props} {...stateObj} {...dispatchObj}/>
      }
    }

    NewComponent.contextType = StoreContext
    return NewComponent
  }
}